<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片上传系统</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
        }
        .form-group {
            margin-bottom: 15px;
        }
        label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
        }
        select, input[type="file"] {
            width: 100%;
            padding: 8px;
            border: 1px solid #ddd;
            border-radius: 4px;
        }
        button {
            background-color: #4CAF50;
            color: white;
            padding: 10px 15px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
        }
        button:hover {
            background-color: #45a049;
        }
        #preview {
            display: flex;
            flex-wrap: wrap;
            margin-top: 20px;
        }
        .preview-item {
            width: 150px;
            margin: 10px;
            text-align: center;
        }
        .preview-item img {
            max-width: 100%;
            max-height: 100px;
        }
        .progress-container {
            width: 100%;
            background-color: #f1f1f1;
            margin-top: 20px;
        }
        .progress-bar {
            width: 0%;
            height: 30px;
            background-color: #4CAF50;
            text-align: center;
            line-height: 30px;
            color: white;
        }
    </style>
</head>
<body>
    <h1>图片上传系统</h1>
    
    <form id="uploadForm">
        <div class="form-group">
            <label for="imageType">图片类型</label>
            <select id="imageType" name="imageType" required>
                <option value="">-- 请选择 --</option>
                <option value="学生风采">学生风采</option>
                <option value="毕业照">毕业照</option>
            </select>
        </div>
        
        <div class="form-group">
            <label for="college">所属学院</label>
            <select id="college" name="college" required>
                <option value="">-- 请选择 --</option>
                <option value="容艺影视产业学院">容艺影视产业学院</option>
                <option value="数据产业学院">数据产业学院</option>
                <option value="数字金融产业学院">数字金融产业学院</option>
                <option value="未来技术产业学院">未来技术产业学院</option>
                <option value="现代通信产业学院">现代通信产业学院</option>
                <option value="游戏产业学院">游戏产业学院</option>
                <option value="智能产业学院">智能产业学院</option>
                <option value="智能建造产业学院">智能建造产业学院</option>
                <option value="毕业照合集">毕业照合集</option>
            </select>
        </div>
        
        <div class="form-group">
            <label for="images">选择图片（可多选）</label>
            <input type="file" id="images" name="images" multiple accept="image/*" required>
        </div>
        
        <div id="preview"></div>
        
        <button type="submit">上传图片</button>
        
        <div class="progress-container" id="progressContainer" style="display: none;">
            <div class="progress-bar" id="progressBar">0%</div>
        </div>
    </form>
    
    <script>
        document.getElementById('images').addEventListener('change', function(e) {
            const preview = document.getElementById('preview');
            preview.innerHTML = '';
            
            const files = e.target.files;
            for (let i = 0; i < files.length; i++) {
                const file = files[i];
                const reader = new FileReader();
                
                reader.onload = function(e) {
                    const div = document.createElement('div');
                    div.className = 'preview-item';
                    
                    const img = document.createElement('img');
                    img.src = e.target.result;
                    img.alt = file.name;
                    
                    const p = document.createElement('p');
                    p.textContent = file.name;
                    
                    div.appendChild(img);
                    div.appendChild(p);
                    preview.appendChild(div);
                };
                
                reader.readAsDataURL(file);
            }
        });
        
        document.getElementById('uploadForm').addEventListener('submit', function(e) {
            e.preventDefault();
            
            const formData = new FormData();
            const imageType = document.getElementById('imageType').value;
            const college = document.getElementById('college').value;
            const files = document.getElementById('images').files;
            
            formData.append('imageType', imageType);
            formData.append('college', college);
            
            for (let i = 0; i < files.length; i++) {
                formData.append('images', files[i]);
            }
            
            const progressContainer = document.getElementById('progressContainer');
            const progressBar = document.getElementById('progressBar');
            
            progressContainer.style.display = 'block';
            progressBar.style.width = '0%';
            progressBar.textContent = '0%';
            
            const xhr = new XMLHttpRequest();
            xhr.open('POST', '/api/upload', true);
            
            xhr.upload.onprogress = function(e) {
                if (e.lengthComputable) {
                    const percentComplete = Math.round((e.loaded / e.total) * 100);
                    progressBar.style.width = percentComplete + '%';
                    progressBar.textContent = percentComplete + '%';
                }
            };
            
            xhr.onload = function() {
                if (xhr.status === 200) {
                    const response = JSON.parse(xhr.responseText);
                    if (response.success) {
                        alert('上传成功！');
                        document.getElementById('uploadForm').reset();
                        document.getElementById('preview').innerHTML = '';
                        progressContainer.style.display = 'none';
                    } else {
                        alert('上传失败：' + (response.error || '未知错误'));
                    }
                } else {
                    alert('上传失败，服务器返回状态：' + xhr.status);
                }
            };
            
            xhr.onerror = function() {
                alert('上传过程中发生错误');
            };
            
            xhr.send(formData);
        });
    </script>
</body>
</html>